<template>
    <div id="city">
        <div class="head">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <div class="mappage">
                <div class="section">
                    <van-cell-group>
                        <van-field type="text" v-model="search" @input="searchs" placeholder="请输入需要搜索的位置" />
                    </van-cell-group>
                </div>
                <div class="addcont">
                    <ul>
                        <li v-for="item in list" @click="currentCity(item)" :key="item.id">{{item.title}} 地址:{{item.address}}</li>
                    </ul>
                </div>
                <div class="map_container">
                    <div class="title">显示当前位置:</div>
                    <div id="allmap"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
export default {
    data() {
        return {
            search: "",
            list: "",
            map: "",
        };
    },
    computed: {
        ...mapState(["cityInfo"]),
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        searchs(){
            var _this = this;
            var options = {
                onSearchComplete: function(results){
                    // 判断状态是否正确
                    if (local.getStatus() == BMAP_STATUS_SUCCESS){
                        _this.list = results.Hr;
                    }
                }
            };
            var local = new BMap.LocalSearch(this.map, options);
            local.search(this.search);
        },
        ...mapMutations(['setInfo']),
        currentCity(info){
            console.log(info);
            this.setInfo(info);
            this.$router.go(-1);
        }
    },
    mounted() {
        var that = this;
        var map = new BMap.Map("allmap"); // 创建Map实例
        this.map = map;
        map.centerAndZoom(
            new BMap.Point(this.cityInfo.longitude, this.cityInfo.latitude),
            11
        ); // 初始化地图,设置中心点坐标和地图级别
        //标注
        var mk = new BMap.Marker(this.cityInfo.point);
        map.addOverlay(mk);
        map.panTo(this.cityInfo.point);
        var options = {
            onSearchComplete: function (results) {
                // 判断状态是否正确
                if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                    that.list = results.Hr;
                    console.log(results);
                }
            },
        };
        var local = new BMap.LocalSearch(map, options);
        local.search(this.search);
    },
};
</script>
<style lang="scss" scoped>
#city {
    height: 100vh;
    border-top: 1px solid transparent;
    background: #f4f4f4;
    font-size: 0.32rem;
}
.head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
.content {
    height: calc(17.786667rem - 1.333rem);
    margin-top: 1.22667rem;
    overflow: auto;
    border-top: 0.01333rem solid transparent;
    .mappage {
        height: 100%;
        background: #fff;
        position: relative;
        overflow: hidden;
        .section {
            width: 90%;
            margin: 0.13333rem auto;
            border: 2px solid #c3c3c3;
            border-radius: 0.13333rem;
        }
        .addcont {
            height: 8.453333rem;
            overflow: auto;
            ul{
                height: 100%;
                li{
                    height: 10%;
                    text-align: left;
                    padding: .26667rem .4rem .26667rem .4rem;
                }
            }
        }
        .map_container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            .title {
                font-size: 0.45333rem;
                font-weight: 700;
                padding: 0.26667rem;
                text-align: left;
            }
            #allmap {
                width: 100%;
                height: 5.33333rem;
            }
        }
    }
}
</style>